<template>
    <div  v-for="(i, x)  in props.machineListData.length" :key="i">
        <div class="d-flex flex-column machine-oee--item"  
            v-for="(item, index) in props.machineListData.slice(x,x+1)" :key="index" style="width:100%">
            <eachartsOEE :id="'echart' + (item.machine)" :value="item.values[0]"></eachartsOEE>
            <div class="d-flex machine-name justify-content-center">{{ item.machine }}</div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import eachartsOEE from "@/components/eachchartsOEE/index.vue";
interface machineDetail {
    machine: string,
    values: Array<number>
}
const props = defineProps<{
    machineListData: machineDetail[]
}>()

</script>

<style lang='scss' scoped>
.machine-oee--item {
    width: 12%;
    /* border: 1px solid #f7f4f4; */
    height: 21.5vh;
}

/* .machineOEE-wrap:after{
    content: '';
    flex:auto;
  } */
.machine-name {
    color: #FFF;
}
</style>